<!--
	声明文档类型：html  符合W3C统一标准规范
	为什么要做这个声明?不做这个声明有什么影响?
	每个浏览器对html css js都有自己的编译模式
-->
<!doctype html>
<html><!--根目录 超文本标记语言 人-->
	<head><!--头部 规定一些信息(提供给浏览器识别) 用户看不到 非可视化标签-->
		<meta charset="utf-8"><!--字符编码:utf-8 国际编码 gbk gb2312中文编码-->
		<!--网页文档三要素-->
		<title>css动画</title><!--网页标题-->
		<meta name="keywords" content="关键词"><!--提供给搜索引擎来搜索网站-->
		<meta name="description" content="描述:对网页内容的大概介绍">
		<link rel="Shortcut Icon" type="image/ico" href= "" />
		<style>/*css样式*/
		/*
			第一步:获取相应的标签元素
			第二步:设置相应的属性
		*/
		*{/* 通用选择器:选择到所有的标签元素*/
			margin:0px;/*外边距*/
			padding:0px;/*内边距*/
			/*
				单独设置每个边距
				margin-top:上
				margin-bottom：下
				margin-left 左
				margin-right 右

				统一设置
				margin:10px;上下左右都相等 10px
				margin:10px 20px;上下10 左右20
				margin:10px 20px 30px;上10 左右20 下30
				margin:10px 20px 30px 40px;顺时针方向 上右下左
			*/
		}
		#wrap{/* # id选择器*/
			width:1130px;/*宽度*/
			height:400px;/*高度*/
			/*background:blue;背景颜色*/
			margin:100px auto;/*上下100px 左右自动(居中)*/
		}
		#wrap h2{
			text-align:center;/*文本对齐方式:居中*/
			margin-bottom:60px;
		}
		.content{/* .class选择器*/
			width:100%;/*相对于父元素计算*/
			height:300px;
			/*border:2px solid red;边框线:宽度 类型(实线) 颜色*/
		}
		.content ul li{
			list-style:none;/*去除前面的小黑圆点*/
			width:210px;
			height:300px;
			/*background:blue;*/
			float:left;/*左浮动:和父元素左端对齐依次往右端显示*/
			margin:0px 8px;/*上下0 左右8*/
		}
		.icon{
			position:relative;/*相对定位:参考物*/
			width:100%;
			height:20px;
			padding-top:180px;
		}
		.icon div.circle{
			position:absolute;
			left:50%;
			top:0px;
			transition:1s;/*css3过渡:1s之内完成动画*/
			margin-left:-78px;
			width:156px;
			height:156px;
			/*优秀的开发工程师一定是为服务器考虑 CPU考虑*/
			background:url("images/words.png") no-repeat;/*设置背景图片*/
			background-position:0px -363px;/*背景定位:具体显示图片的哪个部分*/
		}
		.icon div.left{
			clip:rect(0px,78px,156px,0px);/*定位剪切：上 右 下 左*/
		}
		.icon div.right{
			clip:rect(0px,156px,156px,78px);/*定位剪切：上 右 下 左*/
		}
		.content ul li:hover div.left{/*hover伪类 鼠标移上去实现什么效果*/
			clip:rect(156px,78px,156px,0px);
		}
		.content ul li:hover div.right{
			clip:rect(0px,156px,0px,78px);
		}
		.icon div.iconItem{
			position:absolute;/*绝对定位*/
			left:50%;/*距离参考物左端的距离*/
			top:46px;/*距离参考物上端的距离*/
			width:64px;
			height:64px;
			background:url("images/words.png") no-repeat;
		}
		.icon div.first{
			width:69px;
			margin-left:-35px;
			background-position:-245px -357px;
		}
		.icon div.second{
			margin-left:-32px;
			background-position:-416px -291px;
		}
		.icon div.third{
			width:80px;
			margin-left:-40px;
			background-position:-416px -362px;
		}
		.icon div.four{
			width:69px;
			margin-left:-35px;
			background-position:-245px -445px;
		}
		.icon div.five{
			width:78px;
			margin-left:-39px;
			background-position:-422px -445px;
		}
		.icon div.txt{
			text-align:center;
			/*margin-top:250px;外边距合并问题:若果父元素没有边框或者padding的时候子元素上下外边距会发生合并*/

		}
		</style>
	</head>
	<body><!--身体 可视化标签-->
		<!--盒子模型标签 div 宽度 高度 位置 背景 -->
		<div id="wrap"><!--id="自定义名称" 唯一的(身份证号) 见名知意-->
			<h2>我们能做什么</h2><!--h1-h6-->
			<div class="content"><!--class="自定义的名称" 可重复的(姓名)-->
				<ul><!--无序列标签-->
					<li>
						<div class="icon"><!--图标盒子-->
							<div class="circle left"></div>
							<div class="circle right"></div>
							<div class="iconItem first"></div><!--具体的图标-->
							<div class="txt">高端定制网站</div>
						</div>
					</li>
					<li>
						<div class="icon"><!--图标盒子-->
							<div class="circle left"></div>
							<div class="circle right"></div>
							<div class="iconItem second"></div><!--具体的图标-->
							<div class="txt">高端定制网站</div>
						</div>
					</li>
					<li>
						<div class="icon"><!--图标盒子-->
							<div class="circle left"></div>
							<div class="circle right"></div>
							<div class="iconItem third"></div><!--具体的图标-->
							<div class="txt">高端定制网站</div>
						</div>
					</li>
					<li>
						<div class="icon"><!--图标盒子-->
							<div class="circle left"></div>
							<div class="circle right"></div>
							<div class="iconItem four"></div><!--具体的图标-->
							<div class="txt">高端定制网站</div>
						</div>
					</li>
					<li>
						<div class="icon"><!--图标盒子-->
							<div class="circle left"></div>
							<div class="circle right"></div>
							<div class="iconItem five"></div><!--具体的图标-->
							<div class="txt">高端定制网站</div>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</body>
</html>
